<template>
	<Page>
		<Topbar hideMenu />
		<Content>
			<Panel>
				<view class="left">
					<MyInfo :data="workInfo" backUrl="/pages/workbench/clear/index" />
				</view>
				<view class="right">
					<view class="content_box">
						<FormWrap header title="清线详情">
							<PanelGroup v-model="list1" ref="panelGroup" bodyHeight="63vh">
								<template slot-scope="{ item, index }">
									<u--form labelPosition="left" :model="item" :rules="rules" :ref="`uForm${item.id}`"
										labelWidth="26rem">
										<u-form-item label="检查项目" class="form-item-6rem">
											{{ item.checkProject || '--' }}
										</u-form-item>
										<u-form-item label="检查内容" class="label-fwn form-item-6rem">
											{{ item.checkContent || '--' }}
										</u-form-item>
										<u-form-item label="是否完成" class="label-fwn form-item-6rem">
											<u-switch v-model="item.isFinish" />
										</u-form-item>
										<u-form-item label="备注" class="label-fwn form-item-6rem">
											{{ item.remarks }}
										</u-form-item>
										<u-form-item label="添加图片(选填,最多5张)" class="label-fwn">
											<ImageUpload v-model="item.imagePath" />
										</u-form-item>
									</u--form>
								</template>
							</PanelGroup>
							<template slot="footer">
								<Button large @click="open1" type="primary" :disabled="list1.length === 0"
									:loading="submitLoading" style="margin-left: 3rem;">检查结束</Button>
							</template>
						</FormWrap>
					</view>
				</view>
			</Panel>
		</Content>
		<Modal title="确认提交吗？" ref="popup1" @confirm="confirm1" />
	</Page>
</template>

<script>
	import Page from "@/components/page/index.vue";
	import Topbar from "@/components/topbar/index.vue";
	import Content from "@/components/content/index.vue";
	import Panel from "@/components/panel/index.vue";
	import Empty from "@/components/empty/index.vue";
	import Button from "@/components/button/index.vue";
	import PanelGroup from '@/components/panelGroup/index.vue';
	import FormWrap from '@/components/formWrap/index.vue';
	import InputField from '@/components/formField/inputField/index.vue';
	import InputNumberField from '@/components/formField/inputNumberField/index.vue';
	import NumberBoxField from '@/components/formField/numberBoxField/index.vue';
	import ImageUpload from '@/components/formField/imageUpload/index.vue';
	import DatePicker from '@/components/formField/datePicker/index.vue';
	import Modal from '@/components/modal/index.vue';
	import fetch from "@/utils/fetch";
	import MyInfo from "./info/index.vue";
	import {
		getDevice
	} from "@/store/user.js";

	export default {
		components: {
			Page,
			Topbar,
			Content,
			Panel,
			MyInfo,
			Empty,
			Button,
			PanelGroup,
			FormWrap,
			InputField,
			InputNumberField,
			NumberBoxField,
			ImageUpload,
			DatePicker,
			Modal
		},
		data() {
			return {
				workCode: '',
				productionProcessesNum: '',
				submitLoading: false,
				workInfo: {},
				list1: [],
				rules: {}
			}
		},
		methods: {
			getWorkOrderInfo() {
				fetch('get', '/dms/mobile/selectWorkByWorkCode', {
					workCode: this.workCode
				}).then((res) => {
					this.workInfo = res;
					this.getList1();
				});
			},
			getList1() {
				fetch('get', '/dms/mobile/clearLineConfigList', {
					productionProcessesCode: this.productionProcessesNum,
				}).then((res) => {
					this.list1 = res;
				});
			},
			open1() {
				const selections = this.$refs['panelGroup'].getSelections();
				const list = selections.map((item) => {
					return {
						checkContent: item.checkContent,
						checkProject: item.checkProject,
						img: item.imagePath,
						isFinish: item.isFinish,
						remarks: item.remarks,
					}
				});
				const unFinish = list.find(item => !item.isFinish);
				if (unFinish) {
					this.$toast('请点击完成检查!');
					return;
				}
				this.$refs.popup1.open();
			},
			confirm1() {
				const selections = this.$refs['panelGroup'].getSelections();
				const list = selections.map((item) => {
					return {
						checkContent: item.checkContent,
						checkProject: item.checkProject,
						img: item.imagePath,
						isFinish: item.isFinish,
						remarks: item.remarks,
					}
				});
				fetch('post', '/dms/mobile/clearLine', null, {
					workCode: this.workCode,
					list
				}).then(() => {
					this.$toast('操作成功');
					// this.goto('/pages/workbench/clear/index');
					uni.navigateBack()
				});
			},
			goto(url) {
				uni.navigateTo({
					url,
					animationType: "pop-in",
					animationDuration: 1000,
				})
			},
		},
		onLoad(params) {
			this.workCode = params.workCode;
			this.productionProcessesNum = params.productionProcessesNum;
			this.getWorkOrderInfo();
		}
	};
</script>

<style scoped lang="scss">
	.left {
		flex: 0 auto;
		width: 50rem;
		background: #f8f8fa;
	}

	.right {
		flex: 1;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 0rem 2rem;

		/deep/ .form-wrap .body {
			padding-top: 0 !important;
			flex: 1;
		}
	}

	.tab_box {
		display: flex;
		flex-direction: column;
		padding-right: 2rem;
		margin-right: 2rem;
		width: 27rem;
		height: 64vh;
		overflow-y: auto;


		.tab_btn {
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 1rem;
			height: 8rem;
			width: 100%;
		}

		.active {
			background-color: #ecf1f5;
			color: #0076cc;
			height: 8rem;
			width: 100%;
		}
	}

	.content_box {
		flex: 1;
		display: flex;
		flex-direction: column;
		height: 100%;

		.content {
			flex: 1;
			display: none;
			animation: moving .5s ease;
			overflow-y: scroll;
			display: grid;
			grid: auto-flow / 1fr 1fr 1fr 1fr;
		}

		.active {
			display: block;
		}
	}

	.label-fwn {
		/deep/ .u-form-item__body__left__content__label {
			font-weight: normal !important;
		}
	}

	.form-item-6rem {
		height: 6.5rem;
	}
</style>